<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">京AS8093-康明斯天远</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#page1">
		        现行故障
		    </a>
			<a class="mui-tab-item" href="#page2">
		     历史30天故障
		    </a>
			<a class="mui-tab-item" href="#page3">
		        DutyCycle
		    </a>
		</nav>
		<div class="mui-content">
			<div id="page1" class="mui-control-content mui-active">
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					<li class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<span><h5 class="mui-ellipsis">河北省石家庄市黄河大道136号xxx <a href="#"><span class="mui-icon mui-icon-map"></span></a>
								</h5>
								</span>
								<p class="mui-h6" style="height: auto;">所属公司：XXX公司</p>
								<p class="mui-h6" style="height: auto;">车辆联系人：张经理 <a id="icon-phone" href="javascript:dial();"><span class="mui-icon mui-icon-phone"></span></a></p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<span><h5 class="mui-ellipsis">753或778或1376或2322   报警中 <p style="display: inline;color:yellowgreen;">2015-11-03 17:26:23</p></h5></span>
								<p class="mui-h6" style="height: auto;">故障描述：空气供给执行机构电压高</p>
								<p class="mui-h6" style="height: auto;">风险信息：性能变差；发动机不运转，或启动困难，或发动机运转物理，或运转粗暴；尽快把车开进附近的服务区</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<span><h5 class="mui-ellipsis">753或778或1376或2322   报警中 <p style="display: inline;color:yellowgreen;">2015-11-03 17:26:23</p></h5></span>
								<p class="mui-h6" style="height: auto;">故障描述：空气供给执行机构电压高</p>
								<p class="mui-h6" style="height: auto;">风险信息：性能变差；发动机不运转，或启动困难，或发动机运转物理，或运转粗暴；尽快把车开进附近的服务区</p>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<span><h5 class="mui-ellipsis">753或778或1376或2322   报警中 <p style="display: inline;color:yellowgreen;">2015-11-03 17:26:23</p></h5></span>
								<p class="mui-h6" style="height: auto;">故障描述：空气供给执行机构电压高</p>
								<p class="mui-h6" style="height: auto;">风险信息：性能变差；发动机不运转，或启动困难，或发动机运转物理，或运转粗暴；尽快把车开进附近的服务区</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="page2" class="mui-control-content">
				该页显示历史30天故障
			</div>
			<div id="page3" class="mui-control-content">
				<div class="mui-content-padded">
					<h5 class="mui-content-padded">请选择日期</h5>
					<input type="text" style="width: 45%;" id="beginDateArea" disabled="true;" />
					<p style="display: inline;">至</p>
					<input type="text" style="width: 45%;" id="endDateArea" disabled="true;" />
					<button id='beginDate' style="width: 45%;" data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn">开始日期</button>
					<p style="display: inline;">至</p>
					<button id='endDate' style="width: 45%;" data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn">结束日期</button>
					<div style="margin-top: 10px;text-align: center;">
						<button id="login" style="width: 33%;" class="mui-btn mui-btn-primary">查询</button>
					</div>
				</div>
				<div class="mui-content-padded" style="width: 100%;height: 200px;background-color: gray;text-align: center;line-height: 200px;">
					DutyCycle图表
				</div>
				<div class="mui-content-padded" style="text-align: center;">
					<button style="width: 33%;" class="mui-btn mui-btn-primary">横屏显示更清晰</button>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.min.js"></script>
	<script>
		(function($) {
			$.init();
			var result = $('#result')[0];
			beginDate.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					document.getElementById("beginDateArea").value = rs.text;
					picker.dispose();
				});
			}, false);
			endDate.addEventListener('tap', function() {
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				var picker = new $.DtPicker(options);
				picker.show(function(rs) {
					document.getElementById("endDateArea").value = rs.text;
					picker.dispose();
				});
			}, false);
			var myDate = new Date(new Date().getTime() - 24 * 3600 * 1000).toLocaleDateString();
			document.getElementById("endDateArea").value = myDate;
			var timestamp = new Date().getTime();
			var sevenDayBefore = new Date(timestamp - 7 * 24 * 3600 * 1000).toLocaleDateString();
			document.getElementById("beginDateArea").value = sevenDayBefore;
		})(mui);
		
		//点击电话图标直接调用打电话功能
		function dial() {
			plus.device.dial("114", false);
		}
	</script>

</html>